<!--  -->
<template>
  <div class="">
    <!-- <a-card class="search-wrapper">
      <div class="search-form-wrapper" ref="search">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <el-date-picker
                    v-model="queryParam.times"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handle">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card> -->
    <a-card class="table-wrapper">
      <a-table
        :loading="tableLoading"
        :columns="columns"
        :pagination="pagination"
        @change="(e) => handle(e)"
        :data-source="tableData"
        :scroll="{ y: tableHeight }"
      >
      
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { delRole, fetchRoleAction } from '@/api/system'
import { detailList } from '@/api/activite'
const columns = [
  {
    title: '活动ID',
    dataIndex: 'activityId'
  },
  {
    title: '序列号',
    dataIndex: 'nonce'
  },
  {
    title: '奖品ID',
    dataIndex: 'prizeId'
  },
  {
    title: '参与时间',
    dataIndex: 'created',
  },
  {
    title: '参与结果',
    dataIndex: 'activityResult',
    customRender: (text) => (text === '0' ? '未中奖' : '中奖')
  }
  
]
export default {
  components: {
    
  },
  data() {
    return {
      
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      tableData: [],
      tableLoading: false,
      advanced: false,
      queryParam: {
        pageSize: 10,
        pageNum: 1
      },
      tabbarHeight: 420,
      columns,
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    tableHeight() {
      return document.body.clientHeight - 220
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val)
    }
  },
  activated() {
    this.loadData()
  },
  mounted() {
    this.loadData()
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    loadData() {
      this.tableLoading = true
      detailList({ ...this.queryParam })
        .then((res) => {
          this.tableLoading = false
          this.tableData = res.data.records
          this.pagination.total = res.data.total
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handle(v) {
      if (v && v.current) {
        if (this.queryParam.pageSize == v.pageSize) {
          this.pagination.current = v.current
          this.queryParam.pageNum = v.current
        } else {
          this.queryParam.pageSize = v.pageSize
          this.queryParam.pageNum = 1
          this.pagination.current = 1
        }
      } else {
        this.queryParam.pageNum = 1
        this.pagination.current = 1
        this.queryParam.pageSize = 10
      }
      this.loadData()
    }
  }
}
</script>

<style lang="less" scoped></style>
